<template>
  <div class="box">
    <div class="a1">
      <div class="a12">
        <div class="xiaohui1-logo">
          <img src="@/assets/zhiyuan.png" alt="校徽" class="xiaohui1-logo" />
        </div>
        <div class="header">青年志愿服务网 CYVA</div>
      </div>
    </div>
    <div class="a2">
      <div class="a3">
        <img src="@/assets/zhiyuan.png" alt="校徽" class="xiaohui2-logo" />
        <div class="a31">找回密码</div>
        <div class="a4">
          <input
            type="text"
            class="login-input"
            placeholder="请输入邮箱"
            v-model="email"
          />
        </div>
        <div class="a5">
          <div class="a51">
            <input
              type="text"
              class="login-input"
              placeholder="请输入验证码"
              v-model="code"
            />
          </div>
          <div class="a52">
            <button @click="sendcode" class="a52">获取验证码</button>
          </div>
        </div>
        <div class="a6">
          <input
            type="text"
            class="login-input"
            placeholder="请输入密码"
            v-model="newpwd"
          />
        </div>
        <div class="a7">
          <input
            type="password"
            class="login-input"
            placeholder="请再次输入密码"
            v-model="confirmpwd"
          />
        </div>
        <div class="btn">
          <button @click="resetPassword" class="btn">重置密码</button>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { useRouter } from "vue-router";
import { ref } from "vue";
const router = useRouter();

const email = ref("");
const code = ref("");
const newpwd = ref("");
const confirmpwd = ref("");

const sendcode = async () => {
  if (!email.value) {
    alert("请输入邮箱");
    return;
  }
  try {
    const response = await fetch("http://127.0.0.1:9000/send_email", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({
        email: email.value,
        scene: "reset_pwd",
      }),
    });
    const data = await response.json();
    if (data.errorMsg) {
      alert(data.errorMsg);
    } else {
      alert("验证码已发送");
    }
  } catch (error) {
    alert("发送失败：" + error);
  }
};

const resetPassword = async () => {
  if (!email.value || !code.value || !newpwd.value || !confirmpwd.value) {
    alert("请完善信息");
    return;
  }
  if (newpwd.value !== confirmpwd.value) {
    alert("两次密码不一致");
    return;
  }
  try {
    const response = await fetch("http://127.0.0.1:9000/api/reset_password", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({
        email: email.value,
        code: code.value,
        new_pwd: newpwd.value,
        confirm_pwd: confirmpwd.value,
      }),
    });
    const data = await response.json();
    if (data.errorMsg) {
      alert(data.errorMsg);
    } else {
      alert("密码重置成功，即将跳转至登录页面");
      router.push("/LoginView");
    }
  } catch (error) {
    alert("重置失败：" + error);
  }
};
</script>

<style scoped>
.box {
  width: 100vw;
  height: 100vh;
  background-image: url('@/assets/feige.png');
  background-size: cover;
  background-repeat: no-repeat;
}
.a1 {
  width: 100%;
  height: 50px;
  color: black;
  font-size: 20px;
  display: flex;
}
.a12 {
  display: flex;
  margin-top: 10px;
}
.header{
  font-size: 40px;
  font-weight: bold;
  color: #ffffff;
  text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5);
  margin-left: 20px;
}
.xiaohui1-logo {
  width: 70px;
  height: 70px;
  margin-top: -2px;
  border-radius: 100px;
}
.btn {
  width: 370px;
  height: 44px;
  color: rgba(6, 149, 245, 0.38);
  border: none;
  border-radius: 15px;
  background: white;
  margin-left: -1px;
  margin-top: 0px;
}
.btn:hover {
  background: #e0f7fa;
}

.btn:active {
  transform: translateY(1px);
  box-shadow: 0 2px 8px rgba(0, 138, 197, 0.2);
}
.xiaohui2-logo {
  width: 150px;
  height: auto;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 100px;
}

.a2 {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  padding: 20px;
}
.a3 {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  width: 380px;
  height: 560px;
  margin-top: 28px;
  padding: 20px;
  background: linear-gradient(145deg, rgba(245, 252, 255, 0.94), rgba(0, 138, 197, 0.6));
  border-radius: 20px;
  box-shadow: 0 15px 35px rgba(0, 138, 197, 0.3), 0 5px 15px rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(10px);
  transition: transform 0.3s, box-shadow 0.3s;
}
.a31 {
  font-size: 20px;
}
.a4 {
  display: flex;
  align-items: center;
  width: 380px;
  height: 40px;
  margin-top: 20px;
  margin-bottom: 20px;
  color: white;
  border-radius: 10px;
  padding: 1px 0px;
  border: 1px solid #ccc;
  border-color: rgba(9, 104, 206, 0.99);
  box-sizing: border-box;
}
.a4 input {
  height: 36px;
  outline: none;
  background: #d4f4f9;
  color: rgb(8, 75, 146);
  width: 376px;
  border-radius: 10px;
  border: none;
}
.a5 {
  display: flex;
  align-items: center;
  width: 280px;
  height: 40px;
  margin-top: 20px;
  margin-bottom: 20px;
  margin-left: -100px;
  color: white;
  border-radius: 10px;
  padding: 1px 0px;
  border: 1px solid #ccc;
  border-color: rgba(9, 104, 206, 0.99);
  box-sizing: border-box;
}
.a5 input {
  /* flex: 1; */
  height: 36px;
  outline: none;
  background: #d4f4f9;
  color: rgb(8, 75, 146);
  width: 275px;
  border-radius: 10px;
  border: none;
}
.a52 {
  width: 85px;
  height: 40px;
  color: rgba(6, 149, 245, 0.38);
  border: none;
  border-radius: 10px;
  background: white;
  margin-left: 7px;
  justify-content: center;
  align-items: center;
}
.a6 {
  display: flex;
  align-items: center;
  width: 380px;
  height: 40px;
  margin-top: 20px;
  margin-bottom: 20px;
  color: white;
  border-radius: 10px;
  padding: 1px 0px;
  border: 1px solid #ccc;
  border-color: rgba(9, 104, 206, 0.99);
  box-sizing: border-box;
}
.a6 input {
  /* flex: 1; */
  height: 36px;
  outline: none;
  background: #d4f4f9;
  color: rgb(8, 75, 146);
  width: 376px;
  border-radius: 10px;
  border: none;
}
.a7 {
  display: flex;
  align-items: center;
  width: 380px;
  height: 40px;
  margin-top: 20px;
  margin-bottom: 20px;
  color: white;
  border-radius: 10px;
  padding: 1 0px;
  border: 1px solid #ccc;
  border-color: rgba(9, 104, 206, 0.99);
  box-sizing: border-box;
}
.a7 input {
  height: 36px;
  outline: none;
  background: #d4f4f9;
  color: rgb(8, 75, 146);
  width: 376px;
  border-radius: 10px;
  border: none;
}
</style>
